<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" :visible="show" :before-close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="工号" prop="code"><el-input v-model="form.code" type="text" placeholder="请输入" maxlength="20" show-word-limit></el-input></el-form-item>
      <el-form-item label="姓名" prop="name"><el-input v-model="form.name" type="text" placeholder="请输入" maxlength="20" show-word-limit></el-input></el-form-item>
      <el-form-item label="账号" prop="userName"><el-input v-model="form.userName" type="text" placeholder="请输入" maxlength="20" show-word-limit></el-input></el-form-item>
      <el-form-item label="手机号" prop="mobile"><el-input v-model="form.mobile" type="text" placeholder="请输入" maxlength="11" show-word-limit></el-input></el-form-item>
      <el-form-item label="角色" prop="roles">
        <SelectByApi v-model="form.roles" placeholder="请选择角色" :api="roleList" :multiple="true" :params="{ pageSize: 999 }" labelFiled="name" valueFiled="code"></SelectByApi>
      </el-form-item>
      <el-form-item label="部门" prop="groupPath">
        <SelectGroup v-model="form.groupPath" @change="onChangeGroup"></SelectGroup>
      </el-form-item>
      <el-form-item label="职位" prop="job">
        <!-- <el-input v-model="form.job" type="text" placeholder="请输入" maxlength="50" show-word-limit></el-input> -->
        <SelectByApi v-model="form.job" placeholder="请选择职位" :api="jobList" :multiple="false" :params="{ pageSize: 999 }" labelFiled="name" valueFiled="name"></SelectByApi>
      </el-form-item>
      <el-form-item label="昵称" prop="nickName"><el-input v-model="form.nickName" type="text" placeholder="请输入" maxlength="20" show-word-limit></el-input></el-form-item>
      <el-form-item label="头像" prop="avatar">
        <ImageUpload v-model="form.avatar" :limit="1"></ImageUpload>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="form.gender" placeholder="请选择">
          <el-option label="男" :value="1"></el-option>
          <el-option label="女" :value="2"></el-option>
          <el-option label="未知" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="人脸识别" prop="face">
        <ImageUpload v-model="form.face" :limit="1"></ImageUpload>
      </el-form-item>
      <el-form-item label="邮箱" prop="email"><el-input v-model="form.email" type="text" placeholder="请输入" maxlength="20" show-word-limit></el-input></el-form-item>
      <el-form-item label="学历" prop="education"><el-input v-model="form.education" type="text" placeholder="请输入" maxlength="20" show-word-limit></el-input></el-form-item>
      <el-form-item label="地址" prop="address"><el-input v-model="form.address" type="text" placeholder="请输入" maxlength="20" show-word-limit></el-input></el-form-item>
      <el-form-item label="入职日期" prop="dateJoined">
        <el-date-picker v-model="form.dateJoined" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="离职日期" prop="dateLeaved">
        <el-date-picker v-model="form.dateLeaved" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期"></el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="状态" prop="validate">
        <el-select v-model="form.validate" placeholder="请选择">
          <el-option label="启用" :value="1"></el-option>
          <el-option label="未启用" :value="0"></el-option>
          <el-option label="已关闭" :value="-1"></el-option>
        </el-select>
      </el-form-item> -->
      <extForm v-if="$store.getters.tenantInfo.profile" v-model="form.ext"></extForm>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { memberAdd, memberEdit, jobList, roleList } from '@/api/user';
import extForm from './extForm.vue';
export default {
  components: {
    extForm
  },
  props: {
    /* 显示隐藏 */
    show: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: null
    }
  },
  watch: {
    item: {
      handler(val) {
        this.form = val || {validate: 1};
      },
      immediate: true
    },
    show: {
      handler(val) {
        val && this.resetForm('form');
      },
      immediate: true
    }
  },
  data() {
    const checkMobile = (rule, value, callback) => {
      const reg = /^1[3-9]\d{9}$/;
      if (!value) return callback(new Error('手机号不能为空'));
      if (!reg.test(value)) return callback(new Error('手机号格式不正确'));
      callback();
    };
    return {
      form: {},
      rules: {
        code: [
          {
            required: true,
            message: '请输入工号',
            trigger: ['change', 'input']
          }
        ],
        name: [
          {
            required: true,
            message: '请输入姓名',
            trigger: ['change', 'input']
          }
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'input']
          },
          {
            validator: checkMobile,
            trigger: ['change', 'input']
          }
        ],
        userName: [
          {
            required: true,
            message: '请输入账号',
            trigger: ['change', 'input']
          }
        ],
        roles: [
          {
            required: true,
            message: '请选择角色',
            trigger: ['change', 'input']
          }
        ]
      }
    };
  },
  methods: {
    jobList,
    roleList,
    submit() {
      console.log('打印当前编辑：', this.form);
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            memberEdit(this.form).then((res) => {
              // 验证成功-新增或者编辑
              this.$emit('change', this.form);
              this.close();
            });
          } else {
            memberAdd(this.form).then((res) => {
              // 验证成功-新增或者编辑
              this.$emit('change', this.form);
              this.close();
            });
          }
        }
      });
    },
    onChangeGroup(data) {
        this.$set(this.form, 'groupId', data.id)
        this.$set(this.form, 'groupName', data.name)
    },
    close() {
      this.form = {};
      this.$emit('update:show', false);
    }
  }
};
</script>
